<template>
  <span>
    <svg
      t="1734931335241"
      class="icon"
      viewBox="0 0 1024 1024"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      p-id="1444"
      :style="styleCpd"
    >
      <path
        d="M548.992 503.744L885.44 167.328a31.968 31.968 0 1 0-45.248-45.248L503.744 458.496 167.328 122.08a31.968 31.968 0 1 0-45.248 45.248l336.416 336.416L122.08 840.16a31.968 31.968 0 1 0 45.248 45.248l336.416-336.416L840.16 885.44a31.968 31.968 0 1 0 45.248-45.248L548.992 503.744z"
        p-id="1445"
      ></path>
    </svg>
  </span>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import type { IIconProps } from './type'
const props = withDefaults(defineProps<IIconProps>(), {
  size: 18,
  color: 'rgba(255, 255, 245, 0.86)'
})

// 计算样式
const styleCpd = computed(() => {
  return `fill:${props.color};width:${props.size}px;height:${props.size}px;`
})
</script>

<style scoped>
span {
  display: inline-block;
  box-sizing: border-box;
  padding: 0 10px;
}

.icon {
  cursor: pointer;
}

.icon:hover {
  opacity: 0.5;
}
</style>
